<!doctype html>
<html>
<head>
	
<title>myPapyr / Buscalibro</title>

<link rel="stylesheet" type="text/css" href="estilo.css">
<script>


function manejarRespuesta(response) {

     
      for (var i = 0; i < response.items.length; i++) {
	

        var item = response.items[i];
        document.getElementById("resultados").innerHTML += "<p>#"+ (i+1)+".<a href='alert('Pendiente')' alt='PENDIENTE'><img class='bookEstado' src='img/bookPendiente.png' alt='PENDIENTE'></a><a href='!#' alt='LEYENDO'><img class='bookEstado' src='img/bookLeyendo.png' alt='LEYENDO'></a><a href='!#' alt='LEIDO'><img class='bookEstado' src='img/bookLeido.png' alt='LEIDO'></a>  <span style='color:darkblue;'> " + item.volumeInfo.title + "</span> - " + item.volumeInfo.authors + "</p>";
      }
	
    }

function googleLibros(url){

  
  var resultados = document.getElementById('resultados');
  resultados.innerHTML = "";
	
  var script = document.createElement('script');
  script.src = url;
  resultados.appendChild(script);
 
}


function procesar() 
{

	var busqueda = document.getElementById('busca').value;
	var peticion = "https://www.googleapis.com/books/v1/volumes?q="+busqueda+"&callback=manejarRespuesta";	
	googleLibros(peticion);
 
}


</script>

</head>

<body>

	<div id="main">
	
		<nav>
			<p>Bienvenido <strong>Usuario</strong></p>
			<ul>
				<li><a href="login.html">LOGIN</a></li>
				<li><a href="salir.html">SALIR</a></li>
			</ul>
		</nav>


		<header>
			<h1>myPapyr</h1>
			<img src="img/logo.jpg">
		</header>

		<intro>
		<p>/* MyPapyr es un servicio web basado en la API de Google Books para lectores que deseen gestionar sus lecturas de forma rapida y sencilla */</p>
		</intro>

		<div id="content">
		
			<div id="buscador">
				<section>
					<h2>buscalibros</h2>

					
					<p><input id="busca" type="search" autofocus>
					<input type="submit" value="Buscar" onclick="procesar()"></p>

					

				</section>
			</div>
		

			<div id="panel">

				<section id="resultados">
				
				<p id="notyet">Vaya! Aun no has realizado una busqueda</p>
	
				</section>

				<aside>
				
				
				
					<p><img src="img/bookPendiente.png" >Pendientes <strong>(0)</strong></p>
					<p><img src="img/bookLeyendo.png" >Leyendo <strong>(0)</strong></p>
					<p><img src="img/bookLeido.png" >Leidos <strong>(0)</strong></p>

				

				</aside>
			</div>
	
				

			</div>

			<div id="libro">
			        <h2></h2>
				<div id="izda">
					<section></section>
					<section></section>
				</div>

				<div id="dcha">
					<section></section>
					<section></section>
				</div>

			</div>



		</div>






	
		<footer>Angel Hita Albarracin @ AAP-ETSIIT 2012</footer>
	</div>


</body>

</html>
